import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module.js'

import {MTLLoader}  from 'three/examples/jsm/loaders/MTLLoader'
import {OBJLoader}  from 'three/examples/jsm/loaders/OBJLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

export const space = () => {
  let cont = document.getElementById('root')

  let scene=null
  ,camera=null
  ,renderer=null
  ,controls
  ,stats
  ,ambientLight
  ,gridHelper

  // Init scene 
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0x222222)

  // Init Camera
  camera = new THREE.PerspectiveCamera(45, window.clientWidth / window.clientHeight, 1, 6000)
  camera.position.set(300,300, 0)

  ambientLight = new THREE.AmbientLight('#fff',1) // obj 唯一 id
  scene.add(ambientLight)

  // 网格
  gridHelper = new THREE.GridHelper(400, 160, new THREE.Color(0x555555), new THREE.Color(0x333333))
  scene.add(gridHelper)

  /* let geometry = new THREE.BoxGeometry(1,1,1)
  let material = new THREE.MeshBasicMaterial({color: 0x00ff00})
  let mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh) */

  // Init renderer
  renderer = new THREE.WebGLRenderer({antialias: true})
  renderer.shadowMap.enabled = true
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)
  cont.appendChild(renderer.domElement)

  // 鼠标键盘控制
  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  controls.dampingFactor = 0.25
  controls.screenSpacePanning = false
  // controls.maxDistance = 800
  controls.enableZoom = true;      //是否可以缩放
  // controls.autoRotate = true;   //是否自动旋转
  controls.autoRotateSpeed = 0.3;
  controls.minDistance = 1;        //设置相机距离原点的最远距离
  controls.maxDistance = 1000;     //设置相机距离原点的最远距离
  controls.update()


  // 性能监视器
  stats = new Stats()
  cont.appendChild(stats.domElement)



  const clock = new THREE.Clock()
   // render
   render()
   function render(){
     renderer.render(scene, camera)
     controls.update(clock.getDelta())
     stats.update()

     requestAnimationFrame(render) 
   }
 
   // resize
   window.addEventListener('resize', onWindowResize, false)
   function onWindowResize() {
     if (scene) {
       camera.aspect = window.innerWidth / window.innerHeight
       camera.updateProjectionMatrix()
       renderer.setSize(window.innerWidth, window.innerHeight)
     }
   }
   onWindowResize()
 
}
